<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <link rel="stylesheet" href="css/element.css">
    <link rel="stylesheet" href="node_modules/xterm/css/xterm.css" />
    <link rel="stylesheet" href="node_modules/vue-simple-context-menu/dist/vue-simple-context-menu.css" />

    <style>
        .el-tabs--border-card>.el-tabs__content {
            padding: 0;
        }
    </style>
</head>
<body style="background: white;margin:0;">
    <!--p>
        We are using node <script>document.write(process.versions.node)</script>,
        Chrome <script>document.write(process.versions.chrome)</script>,
        and Electron <script>document.write(process.versions.electron)</script>.
    </p-->
    <div id="app" style="height:calc(100vh - 2px);">
        <div style="display:flex;height:100%;">
            <div style="height:100%;overflow:auto;">
                <draggable v-model="sessions">
                    <transition-group>
                        <div v-for="item, idx in sessions" :key="item.id" @dblclick="open_session(idx)"
                            @contextmenu.prevent.stop="show_session_menu($event, item)">
                            <el-button plain>
                                {{item.name || (item.host + ":" + item.port + "(" + item.username + ")")}}
                            </el-button>
                        </div>
                    </transition-group>
                </draggable>
                <div @click="add_session">
                    <el-button plain>add</el-button>
                </div>
            </div>
            <div style="flex:1;height:100%;flex-grow:1;overflow:hidden;">
                <el-tabs v-model="activate_terminal" type="border-card" closable @tab-remove="close_terminal">
                    <el-tab-pane v-for="item in terminal_tabs" :label="item.name" :name="item.id">
                    </el-tab-pane>
                </el-tabs>
                <div v-for="item in terminals" :id="'terminal-'+item.id" style="height:calc(100% - 40px);" v-show="item.id==activate_terminal"></div>
            </div>
        </div>
        <el-dialog :title="passphrase_dialog_title" :visible.sync="passphrase_dialog_visible">
            <el-alert :title="item" type="error" show-icon v-for="item in passphrase_dialog_errors"></el-alert>
            <div style="display:flex;align-items:center;">
                <div :style="{width:passphrase_dialog_label_width,}">passphrase</div>
                <div style="flex:1">
                    <el-input v-model="passphrase_dialog_passphrase" autocomplete="off" show-password ref="passphrase_dialog_passphrase"
                        @keyup.enter.native="on_passphrase_dialog_confirm">
                    </el-input>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button @click="passphrase_dialog_visible = false">取 消</el-button>
              <el-button type="primary" @click="on_passphrase_dialog_confirm">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="add session" :visible.sync="add_session_dialog_visible">
            <el-alert :title="item" type="error" show-icon v-for="item in add_session_dialog_errors"></el-alert>
            <div style="display:flex;align-items:center;">
                <div :style="{width:add_session_dialog_label_width,}">name</div>
                <div style="flex:1">
                    <el-input v-model="add_session_dialog_name" autocomplete="off"></el-input>
                </div>
            </div>
            <div style="display:flex;align-items:center;">
                <div :style="{width:add_session_dialog_label_width,}">host</div>
                <div style="flex:1">
                    <el-input v-model="add_session_dialog_host" autocomplete="off"></el-input>
                </div>
            </div>
            <div style="display:flex;align-items:center;">
                <div :style="{width:add_session_dialog_label_width,}">port</div>
                <div style="flex:1">
                    <el-input v-model="add_session_dialog_port" autocomplete="off"></el-input>
                </div>
            </div>
            <div style="display:flex;align-items:center;">
                <div :style="{width:add_session_dialog_label_width,}">username</div>
                <div style="flex:1">
                    <el-input v-model="add_session_dialog_username" autocomplete="off"></el-input>
                </div>
            </div>
            <div style="display:flex;align-items:center;">
                <div :style="{width:add_session_dialog_label_width,}">password</div>
                <div style="flex:1">
                    <el-input v-model="add_session_dialog_password" autocomplete="off"></el-input>
                </div>
            </div>
            <div style="display:flex;align-items:center;">
                <div :style="{width:add_session_dialog_label_width,}">privatekey</div>
                <div style="flex:1">
                    <el-input type="textarea" v-model="add_session_dialog_privatekey" autocomplete="off"
                        :autosize="{minRows: 3, maxRows: 5}">
                    </el-input>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button @click="add_session_dialog_visible = false">取 消</el-button>
              <el-button type="primary" @click="on_add_session_dialog_confirm">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog :title="error_dialog_title" :visible.sync="error_dialog_visible">
            <el-alert :title="item" type="error" show-icon v-for="item in error_dialog_errors"></el-alert>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="error_dialog_visible=false">确 定</el-button>
            </div>
        </el-dialog>
        <vue-simple-context-menu element-id="session_menu" :options="session_menu_options" ref="session_menu"
            @option-clicked="on_session_menu_click">
        </vue-simple-context-menu>
    </div>
</body>

<!-- import Vue before Element -->
<script src="js/vue.js"></script>

<!-- import JavaScript -->
<script src="js/element.js"></script>
<script src="node_modules/vue-simple-context-menu/dist/vue-simple-context-menu.min.js"></script>
<script src="js/app.js"></script>
</html>
